<!DOCTYPE html>
<html>
  <head lang="zh-CN">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no"
    />
    <title>时间轴管理</title>
    <link rel="stylesheet" href="./css/luthor.css" />
  </head>
  <body>
    <header>时间轴管理</header>
    <div class="container">
      <!-- 左按钮 -->
      <div><img src="./images/左深@2x.png" class="leftBtn" /></div>
      <!-- 视图 -->
      <div>
        <!-- 上半区 -->
        <div class="topPic">
          <div class="topPic-item">
            <img src="./images/pic2.png" class="topPic-item-img" />
            <span class="topPic-item-msg">川藏铁路建设情况概述...</span>
          </div>
          <div class="topPic-item">
            <img src="./images/pic1.png" class="topPic-item-img" />
            <span class="topPic-item-msg">川藏铁路建设情况概述...</span>
          </div>
          <div class="topPic-item">
            <img src="./images/pic.png" class="topPic-item-img" />
            <span class="topPic-item-msg">川藏铁路建设情况概述...</span>
          </div>
        </div>
        <!-- 时间轴 -->
        <div class="timeLine">
          <div class="timeLine-top">
            <div class="timeLine-top-item">
              <span class="timeLine-top-item-dot"></span>
              <div>
                <img src="./images/深蓝@2x.png" alt="" />
              </div>
              <span class="timeLine-top-item-time">2019年8月1日</span>
            </div>
            <div class="timeLine-top-item">
              <span class="timeLine-top-item-dot"></span>
              <div>
                <img src="./images/深蓝@2x.png" alt="" />
              </div>
              <span class="timeLine-top-item-time">2019年8月1日</span>
            </div>
            <div class="timeLine-top-item">
              <span class="timeLine-top-item-dot"></span>
              <div>
                <img src="./images/深蓝@2x.png" alt="" />
              </div>
              <span class="timeLine-top-item-time">2019年8月1日</span>
            </div>
            <div class="timeLine-top-item">
              <span class="timeLine-top-item-dot"></span>
              <div>
                <img src="./images/深蓝@2x.png" alt="" />
              </div>
              <span class="timeLine-top-item-time">2019年8月1日</span>
            </div>
            <div class="timeLine-top-item">
              <span class="timeLine-top-item-dot"></span>
              <div>
                <img src="./images/深蓝@2x.png" alt="" />
              </div>
              <span class="timeLine-top-item-time">2019年8月1日</span>
            </div>
          </div>
          <div class="timeLine-bottom">
            <div class="timeLine-bottom-item">
              <span class="timeLine-bottom-item-dot"></span>
              <div>
                <img src="./images/浅蓝@2x.png" alt="" />
              </div>
              <span class="timeLine-bottom-item-time">2019年8月1日</span>
            </div>
            <div class="timeLine-bottom-item">
              <span class="timeLine-bottom-item-dot"></span>
              <div>
                <img src="./images/浅蓝@2x.png" alt="" />
              </div>
              <span class="timeLine-bottom-item-time">2019年8月1日</span>
            </div>
            <div class="timeLine-bottom-item">
              <span class="timeLine-bottom-item-dot"></span>
              <div>
                <img src="./images/浅蓝@2x.png" alt="" />
              </div>
              <span class="timeLine-bottom-item-time">2019年8月1日</span>
            </div>
            <div class="timeLine-bottom-item">
              <span class="timeLine-bottom-item-dot"></span>
              <div>
                <img src="./images/浅蓝@2x.png" alt="" />
              </div>
              <span class="timeLine-bottom-item-time">2019年8月1日</span>
            </div>
          </div>
        </div>
        <!-- 下半区 -->
        <div class="bottomPic">
          <div class="bottomPic-item">
            <img src="./images/pic2.png" class="bottomPic-item-img" />
            <span class="bottomPic-item-msg">川藏铁路建设情况概述...</span>
          </div>
          <div class="bottomPic-item">
            <img src="./images/pic1.png" class="bottomPic-item-img" />
            <span class="bottomPic-item-msg">川藏铁路建设情况概述...</span>
          </div>
          <div class="bottomPic-item">
            <img src="./images/pic.png" class="bottomPic-item-img" />
            <span class="bottomPic-item-msg">川藏铁路建设情况概述...</span>
          </div>
        </div>
      </div>
      <!-- 右按钮 -->
      <div><img src="./images/右深@2x.png" class="rightBtn" /></div>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/luthor.js"></script>
  </body>
</html>
